my-banner<template>
    <div>
        <web-header show="group" />
        <div class="box_a">
            <div class="content">
                <div class="title">精彩活动现场：</div>
                <div class="imgbox">
                    <!-- Swiper -->
                    <!-- <div class="swiper mySwiper">
                        <div class="swiper-wrapper">
                            <volist name="row_banner" id="rs">
                                <div class="swiper-slide"><img src="https://admin.hqx.com.cn/Public/Uploads/{$rs}" />
                                </div>
                            </volist>
                        </div>
                    </div> -->
                    <my-banner :list="data.banner" style="width:640px;height: 320px; margin: auto"></my-banner>
                </div>
                <div class="title" style="padding-top:50px;">课程介绍：</div>
                <div class="text"> {{ data.content }} </div>
            </div>
            <aside>
                <dl class="big_title">
                    <dd>{{ dictionaries[data.type1] }}-{{ data.title }}</dd>
                    <!-- <dd>{{data.title}}</dd> -->
                </dl>
                <div class="info">{{ data.intro }}</div>
                <!-- <div class="key">关键词：课程介绍</div> -->
                <div class="title">此课程收益</div>
                <dl class="sy_list">
                    <dt>A</dt>
                    <dd>{{ data.profita }}</dd>
                </dl>
                <dl class="sy_list">
                    <dt>B</dt>
                    <dd>{{ data.profitb }}</dd>
                </dl>
                <dl class="sy_list">
                    <dt>C</dt>
                    <dd>{{ data.profitc }}</dd>
                </dl>
                <dl class="sy_list">
                    <dt>D</dt>
                    <dd>{{ data.profitd }}</dd>
                </dl>
                <div class="title">{{ dictionaries[data.type1] }}-主题课程</div>
                <ul class="pro_list">
                    <li v-for="rs in list" :key="rs.id">
                        <router-link target="_blank" :to="`/group/theme/${rs.id}`">
                            <img :src="`https://admin.hqx.com.cn/Public/Uploads/${rs.pic}`" />
                            {{ rs.title }}
                        </router-link>
                    </li>
                </ul>
            </aside>
        </div>
        <web-footer />
        <back-top />
    </div>
</template>

<script setup>


import { ref, onMounted, computed } from "vue";
import { group_items, group_details } from "@/api/travel.js";
import { useRoute } from "vue-router";
import myBanner from "@/components/swiper/myBanner.vue";
import groupProgramme from "@/components/swiper/groupProgramme.vue";
const route = useRoute();

// 后续内容变多做懒加载
let data = ref({});
let list = ref([]);

const dictionaries = {
    73: '旅行团建',
    75: '团建共创',
    78: '情景体验',
    76: '经典拓展',
    74: '户外探险',
    77: '赛事挑战',
}

onMounted(async () => {
    // 详情
    let result = await group_details({ id: route.params.id });
    data.value = result.data;
    data.value.banner = result.data.banner.split("|").filter((item) => item.trim()).map(item => {
        return {
            'pic': `https://admin.hqx.com.cn/Public/Uploads/${item}`
        }
    })
    // 侧边推荐栏
    let res = await group_items({
        ctype: 70,
        type1: data.value.type1,
        page: 1,
        limit: 3,
    });
    list.value = res.data;

    console.log(data.value.banner)
});
</script>

<style lang="scss" scoped>
@import "../../css/main_group_theme.css";
</style>
